<template>
  <div>
    <h1>App</h1>
    params:{{ $route.params }}
    <hr>
    query:{{ $route.query }}
    <hr>
    hash:{{ $route.hash }}
    <ul>
      <li>
        <RouterLink to="/home?name=rose&age=20">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/1#hello">Shop/1</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/2#hi">Shop/2</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/hello">Shop/hello</RouterLink>
      </li>
      <li>
        <RouterLink to="/cart/100/shop/20">Cart/100/20</RouterLink>
      </li>
      <li>
        <RouterLink to="/cart/1/shop/2?name=jack&age=20&gender=boy#hello">Cart/1/2</RouterLink>
      </li>

      <li>
        <RouterLink to="/post/1">Post/1</RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();

// watch(() => route.query.name, (a, b) => {
watch(() => route.params.id, (a, b) => {
  console.log(a, b);
});

</script>
<style>
div {
  border: solid;
  padding: 20px;
}
</style>
